<template>
  <el-card style="max-width:100%">
    <template #header>
      <div class="card-header">
        <span>上架商品管理(已审核)</span>
      </div>
    </template>
    <el-form :inline="true" :model="queryF" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="selectedRoute" placeholder="切换审核状态" style="width: 200px;" @change="changeRoute">
          <el-option
              v-for="item in routeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
        <!--        <el-button type="primary" @click="changeRoute" style="margin-left: 10px;">切换</el-button>-->
      </el-form-item>
      <el-form-item label="商品编号">
        <el-input v-model="queryF.Product_id" placeholder="请输入查询商品编号" clearable />
      </el-form-item>
      <!--            <el-form-item label="按时间顺序">-->
      <!--              <el-select v-model="formInline.region" placeholder="选择排序方式" clearable >-->
      <!--              <el-option label="一个月之内" value="month" />-->
      <!--              <el-option label="半年内" value="half_year" />-->
      <!--              <el-option label="一年内" value="year" />-->
      <!--              </el-select>-->
      <!--            </el-form-item>-->

      <el-form-item label="商品状态">
        <el-select v-model="queryF.Release_status" placeholder="请选择商品审核状态" clearable>
          <el-option
              v-for="item in productStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="product_id" label="商品编号" width="90" />
      <el-table-column prop="nick_name" label="卖家" width="90" />
      <el-table-column prop="product_name" label="商品名称" width="90" />
      <el-table-column prop="product_price" label="价格" width="80" />
      <el-table-column prop="product_status" label="商品状态" width="90" />
      <el-table-column prop="category" label="一级类别" width="100" />
      <el-table-column prop="subcategory" label="二级类别" width="100" />
      <el-table-column prop="product_detail" label="描述" width="120" />
      <el-table-column prop="product_image" label="图片" width="100" />
      <el-table-column prop="product_time" label="上架时间" width="120" />
      <el-table-column prop="release_status" label="审核结果" width="120" />
      <el-table-column prop="beizhu" label="备注" width="120" />
      <el-table-column prop="operator" label="审核人"/>
<!--&lt;!&ndash;      <el-table-column fixed="right" label="操作" width="120">&ndash;&gt;-->
<!--        <template #default="scope">-->
<!--          <el-button link type="danger" size="small" @click="handleClick(scope.row)">审核-->


<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </el-card>
  <!--审核上架商品信息-->
  <el-dialog v-model="dialogCheckFormVisible" title="商品上架审核" width="800">
    <el-form :model="formCheck">
      <el-form-item label="商品编号" :label-width="formLabelWidth">
        {{formCheck.product_id}}
      </el-form-item>
      <el-form-item label="昵称" :label-width="formLabelWidth">
        {{formCheck.nick_name}}
      </el-form-item>
      <el-form-item label="商品名称" :label-width="formLabelWidth">
        {{formCheck.product_name}}
      </el-form-item>
      <el-form-item label="价格" :label-width="formLabelWidth">
        {{formCheck.product_price}}
      </el-form-item>
      <el-form-item label="商品状态" :label-width="formLabelWidth">
        {{formCheck.product_status}}
      </el-form-item>
      <el-form-item label="一级类别" :label-width="formLabelWidth">
        {{formCheck.category}}
      </el-form-item>
      <el-form-item label="二级类别" :label-width="formLabelWidth">
        {{formCheck.subcategory}}
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        {{formCheck.product_detail}}
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <img :src="formCheck.product_image" class="product-image" />
      </el-form-item>
      <el-form-item label="上架时间" :label-width="formLabelWidth">
        {{formCheck.product_time}}
      </el-form-item>
      <el-form-item label="审核状态" :label-width="formLabelWidth">
        <el-select v-model="formCheck.release_status" >
          <el-option label="通过" value="在售" />
          <el-option label="不通过" value="不通过" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="formCheck.beizhu" autocomplete="off" />
      </el-form-item>
      <el-form-item label="审核人" :label-width="formLabelWidth">
        {{ formCheck.operator }}
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogCheckFormVisible = false">取消</el-button>
        <el-button type="primary" @click="ProductStatus">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <br/>
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 4, 5, 6]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

</template>

<script>
// import axios from 'axios';
import {ElMessage}  from "element-plus";

export default{
  data(){              //数据存放位置
    return {
      selectedRoute: null, // 用于v-model绑定
      routeOptions: [
        { label: '未审核', value: '/uaproduct' },
        // 其他路由选项
        { label: '已审核', value: '/approval' },
        // 可以根据需要添加更多路由选项
      ],
      //分页
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},


      formLabelWidth : '140px',
      formCheck:{},
      form:{},        //审核商品上架信息
      dialogCheckFormVisible:false,//审核弹窗
      // formInline: {},
      queryFrm: {     //商品名称查询对象
        Product_id:"",//通过商品编号查询
        // timePeriod:'',// 时间排序查询字段
      },
      queryFrms: {
        Release_status: "",
      },
      queryF: {
        Product_id:"",//通过商品编号查询
        Release_status: "",
      },
      productStatusOptions: [
        { value: '在售', label: '在售' },
        { value: '不通过', label: '不通过' },
      ],
      tableData:[],//上架商品审核信息表格
    }
        ;
  },
  methods:{
    changeRoute(value) {
      if (this.selectedRoute) {
        // 确保 this.selectedRoute 是一个有效的路由路径字符串
        this.$router.push(this.selectedRoute);
      } else {
        console.error("Selected route is not defined or invalid.");
      }
    },
    //分页
    // LoadStuPageData() {
    //   this.$http.get("http://localhost:8080/approvalproduct/page", {
    //     params: {
    //       page: this.currentPage,
    //       size: this.pageSize
    //     }
    //   }).then((res) => {
    //     this.pageInfo = res.data;
    //     this.tableData = res.data.list;
    //     console.log(this.tableData);
    //   }).catch((err) => {
    //     console.log(err);
    //   });
    // },

    handleClick(check_id){
      console.log(check_id)
      this.formCheck = {...check_id,operator:this.currentAdminName};
      this.dialogCheckFormVisible = true;//显示审核弹窗
    },
    onSubmit(){
      console.log(this.queryF);
      this.LoadProductData();
    },
    LoadtableData() {
      // 获取商品数据
      this.$http.get("http://localhost:8080/approvalproduct/queryNANO", {
        params: {
          Release_status:'审核中'
        }
      }).then((res) => {
        this.tableData = res.data;
        console.log(this.tableData);
        //this.LoadtableData();
      }).catch((err) => {
        console.error('请求数据失败:', err);
      })
    },
    // 处理审核结果的方法

    // 更新商品状态
    ProductStatus(){
      console.log(this.formCheck)
      this.$http.post("http://localhost:8080/approvalproduct/update", this.formCheck).then((res) => {
        if (res.data === 1) {
          console.log("修改成功！");
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
          this.LoadtableData();
          this.formCheck = {}
          this.dialogCheckFormVisible = false
        } else {
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
          console.log("修改失败！");

        }
        console.log(this.formCheck);
      }).catch((err)=>{
        console.error("更新失败：", err);
      })
    },

    LoadProductData(){
      console.log(this.queryFrm)
      this.$http.get("http://localhost:8080/approvalproduct/queryStaAId",{params:{
          Product_id:this.queryF.Product_id,
          Release_status:this.queryF.Release_status
        }}).then((res)=>{
        this.tableData = res.data
        console.log(this.tableData);
      }).catch(function(err){
        console.log(err);
      })
    }
  },

  //被挂载，当前所有组件都被渲染完毕
  mounted() {
    this.currentAdminName = localStorage.getItem('adminName')
    console.log(this.currentAdminName)
    // this.LoadStuPageData();
    this.LoadtableData();
  }
};
</script>

<style scoped>
.product-image {
  width: 100px;        /* 或者使用 max-width 来适应容器宽度 */
  height: auto;        /* 保持图片的宽高比 */
  border: 1px solid #ddd; /* 给图片添加边框，便于看出图片范围 */
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
